<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绑定事件</title>
	</head>
	<body>
		<div style="width:100px; border:1px solid red">绑定事件
		</div>
		<div id="chu" style="width:200px;height:200px; border:1px solid green">绑定多个事件，移除某个事件</div>
		<script>
			var div1 = document.getElementsByTagName("div")[0];
//		   div1.addEventListener("click",function(){alert(1111);},false);
		//非IE语法
		div1.addEventListener("click",al,false);
		function al(){
			alert(1111);
		}
		//IE语法
//		div1.attachEvent('onclick',al);

        //处理兼容性
		if(addEventListener){
			div1.addEventListener("click",al,false);
		}else{
		    div1.attachEvent('onclick',al);
		}
		
		
		//函数功能：用于给节点绑定事件并处理好了兼容性
		/*
		 obj：节点对象                  传实参传的是存储节点对象变量名
		 type:具体事件名             传实参一定要记得加引号
		 fn:要执行的函数名          传实参只要写函数名 ，不写小括号
		   有无返回值：无
		 */
		function myFunction(obj,type,fn){
				if(addEventListener){
				    obj.addEventListener(type,fn,false);
			    }else{
			        obj.attachEvent('on'+type,fn);
			    }
		}
		//移除绑定监听事件
		//非IE :节点.removeEventListener(“事件名”，执行函数块)
		//IE:   节点.detachEvent("on+事件名"，执行函数块);
		
//		给ID名为chu的节点上绑定移入移出点击三个事件 
          var chu = document.getElementById("chu");
          //传函数名
//        myFunction(chu,"mouseover",ru);
//        function ru(){
//        	console.log("移入事件");
//        }
          //函数块
//        myFunction(chu,"mouseover",function(){
//        	console.log("移入事件");
//        });
//         myFunction(chu,"mouseout",function(){
//        	console.log("移出事件");
//        });
//         myFunction(chu,"click",function(){
//        	console.log("点击事件");
//        	 chu.removeEventListener("mouseout",function(){
//         	console.log("移出事件已被移除");
//         });
//        });
//         
//         chu.removeEventListener("mouseout",function(){
//         	console.log("移出事件已被移除");
//         });
    //移除监听事件
         myFunction(chu,"click",hello);
         myFunction(chu,"mouseover",da);
         myFunction(chu,"mouseout",xiao);
         function hello(){
         	console.log("niguole");
         	chu.removeEventListener("mouseover",da);
         }
         function da(){
         	div1.style.width="500px";
         }
         function xiao(){
         	div1.style.width="150px";
         }
        
         
		</script>
	</body>
</html>
